import React, { Component } from 'react';
import { View, Image, StyleSheet, Text, TouchableOpacity } from 'react-native';
import { scaleSize , scaleFontSize} from '../util/size';
import { IReduxMarketItem } from '../interface';

interface MarketItemProp extends IReduxMarketItem {
    amountTo: number,
    nowPrice?: string,
    onPress?: Function
}



class MarketItem extends Component<MarketItemProp, any> {
    constructor(props) {
        super(props);
    }

    onPress = () => {
        if (this.props.onPress) {
            this.props.onPress();
        }
    };

    render() {
        const { type, value, extent, amountTo} = this.props;
        // const amountTo = (Number(value) * 100).toFixed(4);
        let extentStyle = extent[0] === '-' ? 'extentRed' : 'extentGreen';
        return (
            <TouchableOpacity onPress={this.onPress} activeOpacity={0.7} style={styles.container}>
                <View style={[styles.view]}>
                    <Text style={styles.type}>{type}</Text>
                    <View style={styles.priceContent}>
                        <Text style={styles.nowPrice}>
                            {value}
                        </Text>
                        <Text style={styles.priceAmountTo}>
                            {
                                `≈ ${amountTo} CNY`
                            }
                        </Text>
                    </View>
                    <Text style={styles[extentStyle]}> {extent}</Text>
                </View>
            </TouchableOpacity>
        )
    }
}


const itemHeight = scaleSize(68);

const styles = StyleSheet.create({
    container: {
        height: itemHeight,
        borderBottomColor: '#F2F2F2',
        borderBottomWidth: 10
    },
    view: {
        height: itemHeight,
        display: 'flex', 
        flexDirection: 'row',
        backgroundColor: '#FFFFFF',
        paddingTop: scaleSize(17),
        paddingLeft: scaleSize(20),
        paddingRight: scaleSize(20),
        shadowColor: '#F2F2F2',
        shadowOffset: {width:0, height: -1},
        // boxShadow: 'inset 0 -1px 0 0 #F2F2F2'
    },
    type: {
        lineHeight: scaleSize(22),
        width: scaleSize(95),
        fontFamily: 'PingFangSC-Medium',
        fontSize: scaleFontSize(16),
        color: '#666666'
    },
    priceContent: {
        display: 'flex', 
        flexDirection: 'column',
        marginLeft: scaleSize(40),
        width: scaleSize(89),
    },
    nowPrice: {
        fontFamily: 'PingFangSC-Medium',
        fontSize: scaleFontSize(15),
        lineHeight: scaleSize(21),
        color: '#4A4A4A'
    },
    priceAmountTo: {
        fontFamily: 'PingFangSC-Light',
        fontSize: scaleFontSize(10),
        color: '#4A4A4A'
    },
    extentGreen: {
        marginLeft: scaleSize(59),
        height: scaleSize(32),
        width: scaleSize(61),
        lineHeight: scaleSize(32),
        backgroundColor: '#33CB93',
        borderRadius: scaleSize(2),
        textAlign: 'center',
        fontSize: scaleFontSize(12),
        color: '#FFFFFF',
        fontFamily: 'PingFangSC-Semibold'

    },
    extentRed: {
        marginLeft: scaleSize(59),
        height: scaleSize(32),
        // lineHeight: scaleSize(64),
        width: scaleSize(61),
        backgroundColor: 'red',
        borderRadius: scaleSize(2),
        textAlign: 'center',
        lineHeight: scaleSize(32),
        fontSize: scaleFontSize(12),
        color: '#FFFFFF',
        fontFamily: 'PingFangSC-Semibold'
    }
});

export default MarketItem;